<div class="container">
  <div class="row">
    <div class="col">
      <h1 class="d-none d-sm-block h3 mb-4 text-center" i18n>Pricing Plans</h1>
      <div class="mb-4">
        <p i18n>
          Our official Ghostfolio Premium cloud offering is the easiest way to
          get started. Due to the time it saves, this will be the best option
          for most people. Revenue is used to cover operational costs for the
          hosting infrastructure and professional data providers, and to fund
          ongoing development.
        </p>
        <p i18n>
          If you prefer to run Ghostfolio on your own infrastructure, please
          find the source code and further instructions on
          <a href="https://github.com/ghostfolio/ghostfolio">GitHub</a>.
        </p>
      </div>
      <div class="row">
        <div class="col-xs-12 col-lg-4 mb-3">
          <mat-card appearance="outlined" class="h-100">
            <mat-card-content class="d-flex flex-column h-100">
              <div class="flex-grow-1">
                <h4>Open Source</h4>
                <p i18n>
                  For tech-savvy investors who prefer to run Ghostfolio on their
                  own infrastructure.
                </p>
                <ul class="list-unstyled mb-3">
                  <li class="mb-2">
                    <ng-container>&nbsp;</ng-container>
                  </li>
                  <li class="align-items-center d-flex mb-1">
                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
                    <span i18n>Unlimited Transactions</span>
                  </li>
                  <li class="align-items-center d-flex mb-1">
                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
                    <span i18n>Unlimited Accounts</span>
                  </li>
                  <li class="align-items-center d-flex mb-1">
                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
                    <span i18n>Portfolio Performance</span>
                  </li>
                  <li class="align-items-center d-flex mb-1">
                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
                    <span i18n>Portfolio Summary</span>
                  </li>
                  <li class="align-items-center d-flex mb-1">
                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
                    <span i18n>Portfolio Allocations</span>
                  </li>
                  <li class="align-items-center d-flex mb-1">
                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
                    <span i18n>Performance Benchmarks</span>
                  </li>
                  <li class="align-items-center d-flex mb-1">
                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
                    <span i18n>FIRE Calculator</span>
                  </li>
                  <li class="align-items-center d-flex mb-1">
                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
                    <span i18n>Data Import and Export</span>
                    <span
                      class="align-items-center d-flex ml-1"
                      matTooltipPosition="above"
                      [matTooltip]="importAndExportTooltipOSS"
                    >
                      <ion-icon name="information-circle-outline" />
                    </span>
                  </li>
                  <li class="align-items-center d-flex mb-1">
                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
                    <a i18n [routerLink]="routerLinkFeatures"
                      >and more Features...</a
                    >
                  </li>
                  <li class="align-items-center d-flex mb-1">
                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
                    <span i18n>Community Support</span>
                  </li>
                </ul>
              </div>
              <p i18n>Self-hosted, update manually.</p>
              <p class="h5 text-right" i18n>Free</p>
              @if (user?.subscription?.type === 'Basic') {
                <div class="d-none d-lg-block hidden mt-3 text-center">
                  <a color="primary" mat-flat-button>&nbsp;</a>
                  <p class="m-0 text-muted">
                    <small>&nbsp;</small>
                  </p>
                </div>
              }
              @if (durationExtension) {
                <div class="d-none d-lg-block hidden mt-3">
                  <div class="badge p-3 w-100">&nbsp;</div>
                </div>
              }
            </mat-card-content>
          </mat-card>
        </div>
        <div class="col-xs-12 col-lg-4 mb-3">
          <mat-card
            appearance="outlined"
            class="h-100"
            [ngClass]="{ active: user?.subscription?.type === 'Basic' }"
          >
            <mat-card-content class="d-flex flex-column h-100">
              <div class="flex-grow-1">
                <div class="align-items-center d-flex mb-2">
                  <h4 class="flex-grow-1 m-0">Basic</h4>
                  @if (user?.subscription?.type === 'Basic') {
                    <div>
                      <ion-icon class="mr-1" name="checkmark-outline" />
                    </div>
                  }
                </div>
                <p i18n>
                  For new investors who are just getting started with trading.
                </p>
                <ul class="list-unstyled mb-3">
                  <li class="mb-2">
                    <ng-container>&nbsp;</ng-container>
                  </li>
                  <li class="align-items-center d-flex mb-1">
                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
                    <span i18n>Unlimited Transactions</span>
                  </li>
                  <li class="align-items-center d-flex mb-1">
                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
                    <span i18n>Unlimited Accounts</span>
                  </li>
                  <li class="align-items-center d-flex mb-1">
                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
                    <span i18n>Portfolio Performance</span>
                  </li>
                  <li class="align-items-center d-flex mb-1">
                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
                    <span i18n>Data Import and Export</span>
                    <span
                      class="align-items-center d-flex ml-1"
                      matTooltipPosition="above"
                      [matTooltip]="importAndExportTooltipBasic"
                    >
                      <ion-icon name="information-circle-outline" />
                    </span>
                  </li>
                </ul>
              </div>
              <p i18n>Fully managed Ghostfolio cloud offering.</p>
              <p class="h5 text-right" i18n>Free</p>
              @if (user?.subscription?.type === 'Basic') {
                <div class="d-none d-lg-block hidden mt-3 text-center">
                  <a color="primary" mat-flat-button>&nbsp;</a>
                  <p class="m-0 text-muted">
                    <small>&nbsp;</small>
                  </p>
                </div>
              }
              @if (durationExtension) {
                <div class="d-none d-lg-block hidden mt-3">
                  <div class="badge p-3 w-100">&nbsp;</div>
                </div>
              }
            </mat-card-content>
          </mat-card>
        </div>
        <div class="col-xs-12 col-lg-4 mb-3">
          <mat-card
            appearance="outlined"
            class="h-100"
            [ngClass]="{ active: user?.subscription?.type === 'Premium' }"
          >
            <mat-card-content class="d-flex flex-column h-100">
              @if (label) {
                <div class="badge-container position-absolute text-right">
                  <span class="badge badge-warning m-1">{{ label }}</span>
                </div>
              }
              <div class="flex-grow-1">
                <div class="align-items-center d-flex mb-2">
                  <h4 class="align-items-center d-flex flex-grow-1 m-0">
                    <span>Premium</span>
                    <gf-premium-indicator class="ml-1" [enableLink]="false" />
                  </h4>
                  @if (user?.subscription?.type === 'Premium') {
                    <div>
                      <ion-icon class="mr-1" name="checkmark-outline" />
                    </div>
                  }
                </div>
                <p i18n>
                  For ambitious investors who need the full picture of their
                  financial assets.
                </p>
                <ul class="list-unstyled mb-3">
                  <li class="mb-2">
                    <span
                      ><ng-container i18n>Everything in</ng-container>
                      <ng-container>&nbsp;</ng-container>
                      <strong>Basic</strong>,
                      <ng-container i18n>plus</ng-container>:</span
                    >
                  </li>
                  <li class="align-items-center d-flex mb-1">
                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
                    <span i18n>Portfolio Summary</span>
                  </li>
                  <li class="align-items-center d-flex mb-1">
                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
                    <span i18n>Portfolio Allocations</span>
                  </li>
                  <li class="align-items-center d-flex mb-1">
                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
                    <span i18n>Performance Benchmarks</span>
                  </li>
                  <li class="align-items-center d-flex mb-1">
                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
                    <span i18n>FIRE Calculator</span>
                  </li>
                  <li class="align-items-center d-flex">
                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
                    <span i18n>Professional Data Provider</span>
                    <span
                      class="align-items-center d-flex ml-1"
                      matTooltipPosition="above"
                      [matTooltip]="professionalDataProviderTooltipPremium"
                    >
                      <ion-icon name="information-circle-outline" />
                    </span>
                  </li>
                  <li class="align-items-center d-flex line-height-1 mb-1">
                    <ion-icon
                      class="hidden mr-1"
                      name="checkmark-circle-outline"
                    />
                    <small
                      ><ng-container i18n>with API access for</ng-container>
                      <ng-container>&nbsp;</ng-container>
                      <strong>Open Source</strong></small
                    >
                  </li>
                  <li class="align-items-center d-flex mb-1">
                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
                    <a i18n [routerLink]="routerLinkFeatures"
                      >and more Features...</a
                    >
                  </li>
                  <li class="align-items-center d-flex mb-1">
                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
                    <span i18n>Email and Chat Support</span>
                  </li>
                </ul>
              </div>
              <p i18n>Fully managed Ghostfolio cloud offering.</p>
              <p class="h5 text-right" [hidden]="!price">
                <span class="font-weight-normal">
                  @if (coupon) {
                    <del class="text-muted"
                      >{{ baseCurrency }}&nbsp;{{ price }}</del
                    >&nbsp;{{ baseCurrency }}&nbsp;<strong>{{
                      price - coupon
                    }}</strong>
                  } @else {
                    {{ baseCurrency }}&nbsp;<strong>{{ price }}</strong>
                  }
                  <span>&nbsp;</span>
                  <span i18n>per year</span></span
                >
              </p>
              @if (
                hasPermissionToUpdateUserSettings &&
                user?.subscription?.type === 'Basic'
              ) {
                <div class="mt-3 text-center">
                  <button
                    color="primary"
                    mat-flat-button
                    (click)="onCheckout()"
                  >
                    @if (user.subscription.offer.isRenewal) {
                      <ng-container i18n>Renew Plan</ng-container>
                    } @else {
                      <ng-container i18n>Upgrade Plan</ng-container>
                    }
                  </button>
                  <p class="m-0 text-muted">
                    <small i18n>One-time payment, no auto-renewal.</small>
                  </p>
                </div>
              }
              @if (durationExtension) {
                <div class="mt-3">
                  <div
                    class="badge badge-warning font-weight-normal line-height-1 p-3 w-100"
                  >
                    <strong i18n>Limited Offer!</strong>
                    <ng-container>&nbsp;</ng-container>
                    <ng-container i18n
                      >Get {{ durationExtension }} extra</ng-container
                    >
                  </div>
                </div>
              }
            </mat-card-content>
          </mat-card>
        </div>
      </div>
    </div>
  </div>
  @if (user?.subscription?.type === 'Basic') {
    <div class="row">
      <div class="col mt-3">
        <p>
          <ng-container i18n>If you plan to open an account at</ng-container>
          <ng-container>&nbsp;</ng-container>
          @for (
            broker of referralBrokers;
            track broker;
            let i = $index;
            let last = $last
          ) {
            <i>{{ broker }}</i>
            @if (last) {
              <span>, </span>
            } @else {
              @if (i === referralBrokers.length - 2) {
                <ng-container>&nbsp;</ng-container>
                <ng-container i18n>or</ng-container>
                <ng-container>&nbsp;</ng-container>
              } @else {
                <span>, </span>
              }
            }
          }
          <ng-container i18n>please</ng-container>
          <ng-container>&nbsp;</ng-container>
          <a href="mailto:hi@ghostfol.io?Subject=Referral link for..." i18n
            >contact us</a
          >
          <ng-container>&nbsp;</ng-container>
          <ng-container i18n
            >to use our referral link and get a Ghostfolio Premium membership
            for one year</ng-container
          >. <ng-container i18n>Looking for a student discount?</ng-container>
          <ng-container>&nbsp;</ng-container>
          <ng-container i18n>Request it</ng-container>
          <ng-container>&nbsp;</ng-container>
          <a href="mailto:hi@ghostfol.io?Subject=Student Discount" i18n>here</a>
          <ng-container>&nbsp;</ng-container>
          <ng-container i18n>with your university e-mail address</ng-container>.
        </p>
      </div>
    </div>
  } @else if (hasPermissionToCreateUser && !user) {
    <div class="row">
      <div class="col mt-3 text-center">
        <a
          color="primary"
          i18n
          mat-flat-button
          [routerLink]="routerLinkRegister"
          >Get Started</a
        >
        <p class="m-0 text-muted"><small i18n>It’s free.</small></p>
      </div>
    </div>
  }
</div>
